<script>
export default ({
  name: 'index',
  data() {
    return {
      activeName: 'second',
      size: '',
      tableData: [{
        date: '1',
        name: '抑郁测试',
        address: '20',
        result: '结果信息描述 结果信息描述 结果信息描述',
        time: '2022-12-23 10:00',
      }, {
        date: '2',
        name: '抑郁测试',
        address: '30',
        result: '结果信息描述 结果信息描述 结果信息描述',
        time: '2022-12-23 10:00',
      }, {
        date: '3',
        name: '抑郁测试',
        address: '20',
        result: '结果信息描述 结果信息描述 结果信息描述',
        time: '2022-12-23 10:00',
      }, {
        date: '4',
        name: '抑郁测试',
        address: '30',
        result: '结果信息描述 结果信息描述 结果信息描述',
        time: '2022-12-23 10:00',
      },
        {
          date: '5',
          name: '抑郁测试',
          address: '20',
          result: '结果信息描述 结果信息描述 结果信息描述',
          time: '2022-12-23 10:00',
        }, {
          date: '6',
          name: '抑郁测试',
          address: '30',
          result: '结果信息描述 结果信息描述 结果信息描述',
          time: '2022-12-23 10:00',
        }, {
          date: '7',
          name: '抑郁测试',
          address: '20',
          result: '结果信息描述 结果信息描述 结果信息描述',
          time: '2022-12-23 10:00',
        }, {
          date: '8',
          name: '抑郁测试',
          address: '30',
          result: '结果信息描述 结果信息描述 结果信息描述',
          time: '2022-12-23 10:00',
        }
      ],
      dialogVisible: false,
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    open() {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          });
        }
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    }
  }
})
</script>

<template>
  <div>
    <div id="Box">
      <div class="whole">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="学生管理" name="first">
            <div class="let">
              <el-descriptions class="margin-top" :column="1" :size="size" border>
                <el-descriptions-item
                  :labelStyle="{'width':'100%','padding-left':'25px','color':'black','height':'52px'}"
                  :contentStyle="{'display':'none'}">
                  <template slot="label">
                    学生信息
                  </template>
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions class="margin-top" :column="3" :size="size" border>
                <el-descriptions-item :contentStyle="{'text-align': 'center','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    姓名
                  </template>
                  李娟
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'center','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    年龄
                  </template>
                  23
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'center','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    性别
                  </template>
                  男
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'center','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    学历
                  </template>
                  本科
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'center','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    班级
                  </template>
                  信息学院一班
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'center','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    学号
                  </template>
                  3123123
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'center','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    手机号码
                  </template>
                  13716123472
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'center','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    入学时间
                  </template>
                  2022-12-23
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'center','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">

                  </template>

                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'left','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    心理普测结果
                  </template>
                  心理普测结果信息
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'left','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    既往病史
                  </template>
                  心脏病、高血压
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'left','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    心理诊断经历
                  </template>
                  经历内容 经历内容 经历内容 经历内容
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'left','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    服药情况
                  </template>
                  服药情况
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'left','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    家庭情况
                  </template>
                  家庭情况内容 家庭情况内容 家庭情况内容
                </el-descriptions-item>
                <el-descriptions-item :contentStyle="{'text-align': 'left','border-top':'none','color':'black'}"
                                      :labelStyle="{'text-align': 'center','width':'125px','border-top':'none','color':'black','height':'52px'}">
                  <template slot="label">
                    其他
                  </template>
                  其他信息
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
          <el-tab-pane label="预约信息" name="second">
            <div class="reservation">
              <div class="reservation_top">预约信息1</div>
              <div class="reservation_top_main">
                <div><p>心理咨询师：李娟</p>
                  <p>咨询方式：电话咨询</p>
                  <p>咨询时间：2022-12-23 10:00~10:50</p></div>
                <div>
                  问题描述：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                </div>
              </div>
            </div>
            <div class="reservationA">
              <div class="reservation_top">预约信息2</div>
              <div class="reservation_top_main">
                <div><p>心理咨询师：李娟</p>
                  <p>咨询方式：线下咨询</p>
                  <p>咨询时间：2022-12-23 10:00~10:50</p></div>
                <div>
                  问题描述：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="个人咨询记录" name="third">
            <div>
              <el-descriptions class="margin-top" :column="1" :size="size" border>
                <el-descriptions-item
                  :labelStyle="{'width':'100%','padding-left':'33px','color':'black','display':'flex','justify-content':'space-between','padding-right':'33px','align-items': 'center'}"
                  :contentStyle="{'display':'none'}">
                  <template slot="label">
                    <p>个人咨询记录1</p>
                    <p>
                      <el-button type="text" @click="dialogVisible = true">修改</el-button>
                      <el-dialog
                        id="reamke"
                        title="录档"
                        :visible.sync="dialogVisible"
                        :before-close="handleClose">
                        <div>
                          <p>基本信息</p>
                          <div class="individual">
                            <el-descriptions class="margin-top" :column="3" :size="size" border>
                              <el-descriptions-item
                                :labelStyle="{'width':'77px','height':'52px','text-align':'center','color':'black',}">
                                <template slot="label">
                                  个案类型
                                </template>
                              </el-descriptions-item>
                              <el-descriptions-item
                                :labelStyle="{'width':'77px','height':'52px','text-align':'center','color':'black',}">
                                <template slot="label">
                                  个案来源
                                </template>
                              </el-descriptions-item>
                              <el-descriptions-item
                                :labelStyle="{'width':'77px','height':'52px','text-align':'center','color':'black',}">
                                <template slot="label">
                                  处理级别
                                </template>
                              </el-descriptions-item>
                            </el-descriptions>
                          </div>
                          <div class="reamke_main">
                            <p>咨询内容</p>
                            <el-descriptions class="margin-top" :column="1" :size="size" border>
                              <el-descriptions-item :labelStyle="{'width':'205px','height':'62px','color':'black',}">
                                <template slot="label">
                                  来访者情绪表现
                                </template>
                              </el-descriptions-item>
                              <el-descriptions-item :labelStyle="{'width':'205px','height':'74px','color':'black',}">
                                <template slot="label">
                                  来访者身体健康状况、仪表、神态、体态
                                </template>
                              </el-descriptions-item>
                              <el-descriptions-item :labelStyle="{'width':'205px','height':'180px','color':'black',}">
                                <template slot="label">
                                  来访者自述<br>(包括近期状况、人际关系、成长中的相关重要事件等)
                                </template>
                              </el-descriptions-item>
                              <el-descriptions-item :labelStyle="{'width':'205px','height':'120px','color':'black',}">
                                <template slot="label">
                                  咨询过程、方法和策略（重要部分可粘贴逐字稿）
                                </template>
                              </el-descriptions-item>
                              <el-descriptions-item :labelStyle="{'width':'205px','height':'62px','color':'black',}">
                                <template slot="label">
                                  咨询印象 <br>（问题类型、程度、原因）
                                </template>
                              </el-descriptions-item>
                              <el-descriptions-item :labelStyle="{'width':'205px','height':'92px','color':'black',}">
                                <template slot="label">
                                  咨询目标 <br>（近期、远期）
                                </template>
                              </el-descriptions-item>
                            </el-descriptions>
                          </div>
                        </div>
                        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
                      </el-dialog>
                    </p>
                  </template>
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions class="margin-top" :column="3" :size="size" border>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'65px','text-align':'center','color':'black' ,'border-top':'none'}"
                  :contentStyle="{'text-align':'center','border-top':'none'}">
                  <template slot="label">
                    个案类型
                  </template>
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'65px','text-align':'center','color':'black','border-top':'none'}"
                  :contentStyle="{'text-align':'center','border-top':'none'}">
                  <template slot="label">
                    个案来源
                  </template>
                  电话咨询
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'65px','text-align':'center','color':'black','border-top':'none'}"
                  :contentStyle="{'text-align':'center','border-top':'none'}">
                  <template slot="label">
                    处理级别
                  </template>
                  一般
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    来访者情绪表现
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    来访者身体健康状况、仪表、神态、体态
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    来访者自述
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    咨询过程、方法和策略
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    咨询印象
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    咨询目标
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'86px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    咨询目标
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'86px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    咨询效果评估与反馈
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'86px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    文件信息
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'102px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    记录人
                  </template>
                  张先生
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    、
                  </template>

                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">

                  </template>

                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="second_sd">
              <el-descriptions class="margin-top" :column="1" :size="size" border>
                <el-descriptions-item
                  :labelStyle="{'width':'100%','padding-left':'33px','color':'black','display':'flex','justify-content':'space-between','padding-right':'33px','align-items': 'center'}"
                  :contentStyle="{'display':'none'}">
                  <template slot="label">
                    <p>个人咨询记录2</p>
                    <p>
                      <el-button type="text" @click="open">修改</el-button>
                    </p>
                  </template>
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions class="margin-top" :column="3" :size="size" border>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'65px','text-align':'center','color':'black','border-top':'none'}"
                  :contentStyle="{'text-align':'center','border-top':'none'}">
                  <template slot="label">
                    个案类型
                  </template>
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'65px','text-align':'center','color':'black','border-top':'none'}"
                  :contentStyle="{'text-align':'center','border-top':'none'}">
                  <template slot="label">
                    个案来源
                  </template>
                  电话咨询
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'65px','text-align':'center','color':'black','border-top':'none'}"
                  :contentStyle="{'text-align':'center','border-top':'none'}">
                  <template slot="label">
                    处理级别
                  </template>
                  一般
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    来访者情绪表现
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    来访者身体健康状况、仪表、神态、体态
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    来访者自述
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    咨询过程、方法和策略
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    咨询印象
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    咨询目标
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'86px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    咨询目标
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'86px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    咨询效果评估与反馈
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'86px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    文件信息
                  </template>
                  内容内容内容内容内容内容内容内容内容内容
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'102px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">
                    记录人
                  </template>
                  张先生
                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">

                  </template>

                </el-descriptions-item>
                <el-descriptions-item
                  :labelStyle="{'width':'165px','height':'88px','text-align':'center','color':'black'}"
                  :contentStyle="{'color':'black',}">
                  <template slot="label">

                  </template>

                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
          <el-tab-pane label="日常管理反馈" name="fourth">
            <div class="reservation">
              <div class="reservation_top">反馈信息1</div>
              <div class="reservation_top_main">
                <div><p>记录人：李娟</p>
                  <p>添加事件：2022-12-23 10:00</p></div>
                <div>
                  问题描述：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                </div>
              </div>
            </div>
            <div class="reservationA">
              <div class="reservation_top">反馈信息2</div>
              <div class="reservation_top_main">
                <div><p>记录人：李娟</p>
                  <p>咨询方式：线下咨询</p>
                  <p>添加时间：2022-12-23 10:00</p></div>
                <div>
                  问题描述：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="测评记录" name="fifth">
            <div>
              <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="序号"
                  align="center"
                  width="125"
                  height="48"
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="测试名称"
                  align="center"
                  width="159">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="分数"
                  align="center"
                  width="163"
                >
                </el-table-column>
                <el-table-column
                  prop="result"
                  label="测评结果"
                  align="center"
                  width="842"
                >
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="测试时间"
                  align="center"
                  width="249"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="foter_page">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="230">
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  text-decoration: none;
  box-sizing: border-box;
  list-style: none;

  button {
    cursor: pointer
  }
}

//整体盒子css
#Box {
  width: 100%;
  background-color: rgb(242, 243, 244);
  padding-top: 12px;
}

//内容整体盒子css
.whole {
  width: 1656px;
  margin: auto;
  background-color: #fff;
  padding: 42px 58px 10px 59px;
  height: 1232px;
}

::v-deep .el-tabs__content {
  margin-top: 50px;
}

.reservation {
  width: 100%;
  height: 203px;
  border: 1px solid rgba(187, 187, 187, 1);

  .reservation_top {
    width: 100%;
    height: 52px;
    background-color: rgba(242, 243, 244, 1);
    padding: 16px 2px 16px 33px;
    font-size: 14px;
    font-weight: 600;
  }

  .reservation_top_main {
    width: 100%;
    border-top: 1px solid rgba(187, 187, 187, 1);
    font-size: 14px;
    font-weight: 600;

    div:nth-of-type(1) {
      width: 75%;
      display: flex;
      padding: 14px 2px 22px 40px;
      justify-content: space-between;
    }

    div:nth-of-type(2) {
      width: 75%;
      padding: 14px 2px 22px 40px;
    }
  }
}

.reservationA {
  width: 100%;
  height: 203px;
  border: 1px solid rgba(187, 187, 187, 1);
  margin-top: 25px;

  .reservation_top {
    width: 100%;
    height: 52px;
    background-color: rgba(242, 243, 244, 1);
    padding: 16px 2px 16px 33px;
    font-size: 14px;
    font-weight: 600;
  }

  .reservation_top_main {
    width: 100%;
    border-top: 1px solid rgba(187, 187, 187, 1);
    font-size: 14px;
    font-weight: 600;

    div:nth-of-type(1) {
      width: 75%;
      display: flex;
      padding: 14px 2px 22px 40px;
      justify-content: space-between;
    }

    div:nth-of-type(2) {
      width: 75%;
      padding: 14px 2px 22px 40px;
    }
  }
}

.second_sd {
  margin-top: 53px;
}

.foter_page {
  margin-top: 154px;
  width: 100%;
  display: flex;
  justify-content: right;
}

::v-deep .el-message-box__wrapper {
  top: -450px !important;
}

//修改按钮
#reamke {
  ::v-deep .el-dialog {
    width: 832px !important;

    .el-dialog__header {
      padding: 15px 20px 15px 26px;
      background-color: rgba(24, 146, 255, 1);
      display: flex;

      .el-dialog__title {
        color: white;
      }

      .el-dialog__headerbtn {
        top: 13px;
        font-size: 24px;

        i {
          color: white;
        }
      }
    }

    .el-dialog__body {
      padding: 31px 86px 48px 60px;

      > div {
        p {
          font-size: 18px;
          color: black;
        }

        .individual {
          width: 100%;
          margin-top: 21px;
        }
      }
    }

    .el-dialog__footer {
      text-align: center;

      button {
        width: 80px;
        height: 30px;
        padding: 5px 20px;

        :nth-of-type(2) {
          margin-left: 20px;
          border-radius: 4px;
          background-color: rgba(24, 146, 255, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
        }
      }
    }
  }

  .reamke_main {
    margin-top: 18px;

    p {
      font-size: 18px;
      color: black;
      margin-bottom: 5px;
    }
  }
}
</style>
